<template>
  <view>
    <van-field
      :label="title"
      :value="value"
      :placeholder="placeholder"
      :size="size"
      :required="required"
      :is-link="isLink"
      :input-align="inputAlign"
      readonly
      @tap="openPicker"
    />
    <van-popup :show="visible" position="bottom" round :z-index="zIndex">
      <view class="flex-between p-a-15">
        <text @click="visible = false">取消</text>
        <text class="c-blue" @click="confirm">确定</text>
      </view>
      <picker-view
        indicator-style="height: 50px;line-height:50px;"
        :value="current.index"
        @change="bindChange"
      >
        <picker-view-column>
          <view class="item" v-for="(item, index) in list.year" :key="index"
            >{{ item }}年</view
          >
        </picker-view-column>
        <picker-view-column>
          <view class="item" v-for="(item, index) in list.month" :key="index"
            >{{ setVal(item) }}月</view
          >
        </picker-view-column>
        <template v-if="dateType == 'date'">
          <picker-view-column>
            <view class="item" v-for="(item, index) in list.day" :key="index"
              >{{ setVal(item) }}日</view
            >
          </picker-view-column>
        </template>
        <template v-if="dateType == 'datetime'">
          <picker-view-column>
            <view class="item" v-for="(item, index) in list.hour" :key="index"
              >{{ setVal(item) }}时</view
            >
          </picker-view-column>
          <picker-view-column>
            <view class="item" v-for="(item, index) in list.min" :key="index"
              >{{ setVal(item) }}分</view
            >
          </picker-view-column>
        </template>
      </picker-view>
    </van-popup>
  </view>
</template>
  
  <script>
import moment from "moment";
export default {
  name: "DatetimePicker",
  props: {
    isLink: {
      type: Boolean,
      default: () => {
        return true;
      },
    },
    inputAlign: {
      type: String,
      default: () => "left",
    },
    title: {
      type: String,
    },
    placeholder: {
      type: String,
      default: () => {
        return "请选择日期";
      },
    },
    size: {
      type: String,
      default: () => "normal",
    },
    value: {
      type: String,
    },
    dateType: {
      type: String,
      default: () => "date" // date, datetime, yearMonth,
    },
    dateTitle: {
      type: String,
    },
    startDate: {
      type: String,
    },
    startYear: {
      type: Number || String,
      default: () => 2020,
    },
    endYear: {
      type: Number,
      default: () => 2050,
    },
    placeholder: {
      type: String,
      default: () => "请选择",
    },
    zIndex: {
      type: Number,
      default: () => 100,
    },
  },
  data() {
    return {
      current: {
        year: null,
        month: null,
        day: null,
        hour: null,
        min: null,
        index: [0, 0, 0, 0, 0],
      },
      list: {
        year: null,
        month: null,
        day: null,
        hour: null,
        min: null,
      },
      // indicatorStyle: 'height: 50rpx;',
      visible: false,
    };
  },
  watch: {
    "current.index"(newVal, oldVal) {
      let endDay = moment(
        this.list.year[newVal[0]] +
          "/" +
          this.list.month[newVal[1]] +
          "/" +
          this.list.day[newVal[2]]
      )
        .endOf("month")
        .format("YYYY/MM/DD");
      let arr = endDay.split("/");
      this.getArr("day", 1, Number(arr[arr.length - 1]) + 1);
    },
  },
  created() {
    this.getInitData();
  },
  methods: {
    openPicker() {
      if (this.isLink) {
        this.visible = true;
        this.init();
      }
    },
    closePicker() {
      this.visible = false;
    },
    init() {
      this.visible = true;
      let current = moment().format("YYYY/MM/DD");
      current = current + " 00:00";
      let value;
      if (this.value) {
        value = this.value;
      } else {
        value = this.startDate ? this.startDate : current;
      }
      value = value.replace(/-/g, "/");
      this.getCurrentIndex(value);
    },
    getCurrentIndex(value) {
      let val,arr;
      if(this.dateType == 'datetime'){ 
        val = value.split(" ");
        let arr1 = val[0].split("/");
        let arr2 = val[1].split(":");
        arr = arr1.concat(arr2);
      }else{
        val = value.split(" ");
        arr = val[0].split('/');
      };  
      this.current.index = [
        this.getIndex("year", arr[0]),
        this.getIndex("month", arr[1]),
        this.getIndex("day", arr[2]),
        this.getIndex("hour", arr[3]),
        this.getIndex("min", arr[4]),
      ];
    },
    getIndex(type, val) {
      let index = this.list[type].indexOf(Number(val));
      this.current[type] = Number(val);
      return index;
    },
    getInitData() {
      this.getArr("year", this.startYear, this.endYear);
      this.getArr("month", 1, 13);
      this.getArr("day", 1, 32);
      this.getArr("hour", 0, 24);
      this.getArr("min", 0, 60);
    },

    getArr(type, start, end) {
      let arr = [];
      for (let i = start; i < end; i++) {
        arr.push(i);
      }
      this.list[type] = arr;
    },
    bindChange(e) {
      const val = e.detail.value;
      this.current.index = val;
    },
    confirm() {
      this.current.year = this.list.year[this.current.index[0]];
      this.current.month = this.list.month[this.current.index[1]];
      this.current.day = this.list.day[this.current.index[2]];
      this.current.hour = this.list.hour[this.current.index[3]];
      this.current.min = this.list.min[this.current.index[4]];
      let val =
        this.current.year +
        "-" +
        this.setVal(this.current.month) +
        "-" +
        this.setVal(this.current.day);
      if (this.dateType == "year-month") {
        val = this.current.year + "-" + this.setVal(this.current.month);
      }
      if (this.dateType == "datetime") {
        val =
          this.current.year +
          "-" +
          this.setVal(this.current.month) +
          "-" +
          this.setVal(this.current.day) +
          " " +
          this.setVal(this.current.hour) +
          ":" +
          this.setVal(this.current.min);
      }
      this.$emit("update:value", val);
      this.$emit("input", val);
      this.$emit("confirm", val);
      this.visible = false;
    },
    setVal(val) {
      return val < 10 ? "0" + val : val;
    },
  },
};
</script>
  
  <style lang="scss" scoped>
picker-view {
  width: 100%;
  background: #fff;
  height: 600rpx;
  text-align: center;
}
.item {
  line-height: 50px;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #333;
  font-size: 34rpx;
}
</style>
  